    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@include file="../common/header.jsp"%>
            <div class="easyui-layout" data-options="fit:true">
            <!-- Begin of toolbar -->
            <div id="wu-toolbar">
            <div class="wu-toolbar-button">
                <%@include file="../common/menus.jsp"%>


<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>--%>
<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>--%>
            </div>
            <div class="wu-toolbar-search">

            <label>用户名：</label><input  id="search-username" class="wu-text" style="width:100px">
            <label>所属角色：</label>
                <select id="search-role" class="easyui-combobox" panelHeight="auto" style="width:120px">
                    <option value="0">全部</option>
                    <c:forEach items="${roleList}" var="role">
                        <option value="${role.id}">${role.name}</option>
                    </c:forEach>
                </select>
            <label>性别：</label>
                <select id="search-sex" class="easyui-combobox" panelHeight="auto" style="width:120px">
                    <option value="-1">全部</option>
                    <option value="0">未知</option>
                    <option value="1">男</option>
                    <option value="2">女</option>

                </select>

            <a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
            </div>
            </div>
            <!-- End of toolbar -->
            <%-- 列表显示       --%>
            <table id="data-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar"></table>
            </div>
            <!-- Begin of easyui-dialog -->
        <%-- 添加页面       --%>
        <div id="add-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:420px; padding:10px;">
        <form id="add-form" method="post">
        <table>
            <tr>
                <td width="60" align="right">头像预览:</td>
                <td valign="middle">
                    <img id="preview-photo" style="float:left;" src="/BaseProjectSSM/resources/admin/easyui/images/user_photo.jpg" width="100px">
                    <a style="float:left;margin-top:40px;" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-upload" onclick="uploadPhoto()" plain="true">上传图片</a>
                </td>
            </tr>
            <tr>
                <td width="60" align="right">头像:</td>
                <td><input type="text" id="add-photo" name="photo" value="/BaseProjectSSM/resources/admin/easyui/images/user_photo.jpg" readonly="readonly" class="wu-text " /></td>
            </tr>
        <tr>
        <td width="60" align="right">用户名:</td>
        <td><input type="text" name="username" class="wu-text easyui-validatebox"  data-options="required:true, missingMessage:'请填写用户名'"/></td>
        </tr>
        <tr>
            <td width="60" align="right">密码:</td>
            <td><input type="password" name="password" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写密码'"/></td>
        </tr>
            <tr>
                <td width="60" align="right">性别:</td>
                <td>
                    <select name="sex" class="easyui-combobox" panelHeight="auto" style="width:268px">
                        <option value="0">未知</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td width="60" align="right">年龄:</td>
                <td><input type="text" name="age" class="wu-text easyui-numberbox easyui-validatebox" data-options="min:1,precision:0" /></td>
            </tr>
            <tr>
                <td width="60" align="right">地址:</td>
                <td><input type="text" name="address"  class="wu-text easyui-validatebox" /></td>
            </tr>
            <tr>
                <td width="60" align="right">所属角色:</td>
                <td>
                    <select name="roleId" class="easyui-combobox" panelHeight="auto" style="width:268px">
                        <c:forEach items="${roleList}" var="role">
                            <option value="${role.id}">${role.name}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>

        </table>
        </form>
        </div>
        <%-- 修改页面       --%>
        <div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="edit-form" method="post">
        <input type="hidden" id="edit-id" name="id">
            <table>
                <tr>
                    <td width="60" align="right">头像预览:</td>
                    <td valign="middle">
                        <img id="edit-preview-photo" style="float:left;" src="/BaseProjectSSM/resources/admin/easyui/images/user_photo.jpg" width="100px">
                        <a style="float:left;margin-top:40px;" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-upload" onclick="uploadPhoto()" plain="true">上传图片</a>
                    </td>
                </tr>
                <tr>
                    <td width="60" align="right">头像:</td>
                    <td><input type="text" id="edit-photo" name="photo" value="/BaseProjectSSM/resources/admin/easyui/images/user_photo.jpg" readonly="readonly" class="wu-text " /></td>
                </tr>
                <tr>
                    <td width="60" align="right">用户名:</td>
                    <td><input type="text" id="edit-username" name="username" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写用户名'"/></td>
                </tr>

                <tr>
                    <td width="60" align="right">性别:</td>
                    <td>
                        <select name="sex" id="edit-sex" class="easyui-combobox" panelHeight="auto" style="width:268px">
                            <option value="0">未知</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="60" align="right">年龄:</td>
                    <td><input type="text" id="edit-age" name="age" class="wu-text easyui-numberbox easyui-validatebox" data-options="min:1,precision:0" /></td>
                </tr>
                <tr>
                    <td width="60" align="right">地址:</td>
                    <td><input type="text" id="edit-address" name="address" class="wu-text easyui-validatebox" /></td>
                </tr>
                <tr>
                    <td width="60" align="right">所属角色:</td>
                    <td>
                        <select name="roleId" id="edit-roleId" class="easyui-combobox" panelHeight="auto" style="width:268px">
                            <c:forEach items="${roleList}" var="role">
                                <option value="${role.id}">${role.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>

            </table>
        </form>
        </div>
    <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
    <div id="p" style="width:400px;"></div>
<input type="file" id="photo-file" style="display: none;" onchange="upload()">
    <%@include file="../common/footer.jsp"%>

    <!-- End of easyui-dialog -->
            <script type="text/javascript">
<%--                上传图片--%>
        function start(){
            var value = $('#p').progressbar('getValue');
            if (value < 100){
                value += Math.floor(Math.random() * 10);
                $('#p').progressbar('setValue', value);
            }else{
                $('#p').progressbar('setValue',0)
            }
        };
function upload(){
    if($("#photo-file").val() == '')return;
    //创建formdata对象
    var formData = new FormData();
    //获取到选中的文件
    formData.append('photo',document.getElementById('photo-file').files[0]);
    $("#process-dialog").dialog('open');
    var interval = setInterval(start,200);//每隔200毫秒，重复执行一次
    $.ajax({
        url:'upload_photo',
        type:'post',
        data:formData,
        contentType:false,
        processData:false,
        success:function(data){
            clearInterval(interval);
            $("#process-dialog").dialog('close');
            if(data.type == 'success'){
                $("#preview-photo").attr('src',data.filepath);
                $("#add-photo").val(data.filepath);
                $("#edit-preview-photo").attr('src',data.filepath);
                $("#edit-photo").val(data.filepath);
            }else{
                $.messager.alert("消息提醒",data.msg,"warning");
            }
        },
        error:function(data){
            clearInterval(interval);
            $("#process-dialog").dialog('close');
            $.messager.alert("消息提醒","上传失败!","warning");
        }
    });
}
            function uploadPhoto() {

                $("#photo-file").click();

            }
            /**
            * Name 添加记录
            */
            function add(){
            var data = $("#add-form").serialize();
            $.ajax({
            url:'../../admin/user/add',
            dataType:'json',
            type:'post',
            data:data,
            success:function(data){
            if(data.type == 'success'){
            $.messager.alert('信息提示','添加成功！','info');

            $('#add-dialog').dialog('close');
            $('#data-datagrid').datagrid('reload');
            }else{
            $.messager.alert('信息提示',data.msg,'info');
            }
            }
            });
            }





            /**
            * Name 修改记录
            */
            function edit(){
            var data = $("#edit-form").serialize();
            $.ajax({
            url:'../../admin/user/edit',
            dataType:'json',
            type:'post',
            data:data,
            success:function(data) {
                if(data.type == 'success'){
                    $.messager.alert('信息提示','修改成功！','info');
                    $("#edit-dialog").dialog('close');
                    $("#data-datagrid").datagrid('reload');
        }else {
                   $.messager.alert('提示信息',data.msg,'info');
        }

        }

            });
            }

            /**
            * Name 删除记录
            */
            function remove(){
            $.messager.confirm('信息提示','确定要删除该记录？', function(result){
            if(result){
            var item = $('#data-datagrid').datagrid('getSelections');//获取所有选中的行，当没有选中的记录时，将返回空数组。
            if(item==null||item.length==0){
            $.messager.alert('提示信息','请选择要删除的数据','info');
            return;
            }
                var ids = '';
                for(var i=0;i<item.length;i++){
                    ids += item[i].id + ',';
                }
            $.ajax({
            url:'../../admin/user/delete',
            dataType:'json',
            type:'post',
            data:{ids:ids},
            success:function(data){
            if(data.type == 'success'){
            $.messager.alert('信息提示','删除成功！','info');
            $('#data-datagrid').datagrid('reload');
            }
            else
            {
            $.messager.alert('信息提示',data.msg,'info');
            }
            }
            });
            }
            });
            }

            /**
            * Name 打开添加窗口
            */
            function openAdd(){
            //$('#add-form').form('clear');
            $('#add-dialog').dialog({
            closed: false,
            modal:true,
            title: "添加信息",
            buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: add
            }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
            $('#add-dialog').dialog('close');
            }
            }],
                onBeforeOpen:function(){
                    //$("#add-form input").val('');

                }
            });
            }

            /**
            * Name 打开修改窗口
            */
            function openEdit(){
            //$('#edit-form').form('clear');
            var item = $('#data-datagrid').datagrid('getSelections');//获取所有选中的行，当没有选中的记录时，将返回空数组。
            if(item==null||item.length==0){
                $.messager.alert('提示信息','请选择要修改的数据','info');
                return;
        }
            //不能选择多条记录
                if(item.length>1){
                    $.messager.alert('提示信息','请选择一条要修改的数据','info');
                    return;
                }
                item=item[0];

            $('#edit-dialog').dialog({
            closed: false,
            modal:true,
            title: "修改信息",
            buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: edit
            }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
            $('#edit-dialog').dialog('close');
            }
            }],
        //打开前执行
            onBeforeOpen:function() {
                $("#edit-id").val(item.id);
                $("#edit-preview-photo").attr('src',item.photo);
                $("#edit-photo").val(item.photo);
                $('#edit-username').val(item.username);
                $("#edit-sex").combobox('setValue',item.sex);
                $('#edit-age').numberbox('setValue',item.age);
                $('#edit-address').val(item.address);
                $('#edit-roleId').combobox('setValue',item.roleId);

        }
            });
            }

            /**
            * Name 分页过滤器
            */
            function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
            data = {
            total: data.length,
            rows: data
            }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
            onSelectPage:function(pageNum, pageSize){
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});
            dg.datagrid('loadData',data);
            }
            });
            if (!data.originalRows){
            data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
            }

            //搜索按钮监听
            $("#search-btn").click(function(){
                var sex=$("#search-sex").combobox('getValue');
                var roleId=$("#search-role").combobox('getValue');
                var option={username:$("#search-username").val()};
                if(roleId != 0){
                    option.roleId=roleId
                }
                if(sex != -1){
                    option.sex=sex;
                }
                $('#data-datagrid').datagrid('reload',option);

            });
                /**
                * Name 载入数据
                */
            $('#data-datagrid').datagrid({
            url:'../../admin/user/list',
            //loadFilter:pagerFilter,
            rownumbers:true,
            singleSelect:false,//单选
            pageSize:20,
            pagination:true,
            multiSort:true,
            fitColumns:true,
            fit:true,
            idField:'id',
            treeField:'name',
            columns:[[
            { field:'chk',checkbox:true},
            { field:'photo',title:'用户头像',width:100,align:'center',formatter:function(value,row,index){
                    var img = '<img src="'+value+'" width="50px" />';
                    return img;
                }},
            { field:'username',title:'用户名',width:100,sortable:true},
            { field:'password',title:'密码',width:180,sortable:true},
                { field:'sex',title:'性别',width:100,formatter:function(value,row,index){
                        switch(value){
                            case 0:{
                                return '未知';
                            }
                            case 1:{
                                return '男';
                            }
                            case 2:{
                                return '女';
                            }
                        }
                        return value;
                    }},
            { field:'age',title:'年龄',width:180,sortable:true},
            { field:'address',title:'地址',width:180,sortable:true},

            { field:'roleId',title:'所属角色',width:100,formatter:function(value,row,index){

                    var roleList = $("#search-role").combobox('getData');
                    //console.log(roleList);
                    for(var i=0;i<roleList.length;i++){
                        if(value == roleList[i].value)
                            return roleList[i].text;
                    }

                    return value;
        }},
            ]]
            });
            </script>